<template>
  <div class="p-15 bg-fff" v-loading="loading">
    <el-form class="pAll bg-fff" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
      <el-row>
        <el-col :span="18">
          <el-form-item label=" 机房温度:" prop="wd_min" class="mb_8">
            <el-input placeholder="请输入内容" class="w150" v-model.number="ruleForm.wd_min" @input="handleInput($event, 'wd_min')" @blur="blurInput($event, 'wd_min')">
              <template slot="append">℃</template>
            </el-input>
            <span style="padding: 0 10px">-</span>
            <el-form-item label="" prop="wd_max" :rules="rules.wd_max" class="inline">
              <el-input placeholder="请输入内容" class="w150" v-model.number="ruleForm.wd_max" @input="handleInput($event, 'wd_max')" @blur="blurInput($event, 'wd_max')">
                <template slot="append">℃</template>
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <span style="color: #909399; padding-top: 8px">在设定值外问题列表产生机房温度告警</span>
          </el-form-item>
          <el-form-item label="机房湿度:" prop="sd_min" class="mb_8">
            <el-input placeholder="请输入内容" class="w150" v-model.number="ruleForm.sd_min" @input="handleInput($event, 'sd_min')" @blur="blurInput($event, 'sd_min')">
              <template slot="append">%</template>
            </el-input>
            <span style="padding: 0 10px">-</span>
            <el-form-item label="" prop="sd_max" :rules="rules.sd_max" class="inline">
              <el-input placeholder="请输入内容" class="w150" v-model.number="ruleForm.sd_max" @input="handleInput($event, 'sd_max')" @blur="blurInput($event, 'sd_max')">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <span style="color: #909399; padding-top: 8px">在设定值外问题列表产生机房湿度告警</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnSizeStyle" size="medium" @click="submitBtn()" v-preventReClick>保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl.js'
export default {
  data() {
    var validateNum_wd = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('最小数值为0'))
      } else if (value > 50) {
        callback(new Error('最大数值不超过50'))
      } else {
        callback()
      }
    }
    var validateNum_sd = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('最小数值为0'))
      } else if (value > 100) {
        callback(new Error('最大数值不超过100'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        id: '',
        wd_min: '0.0',
        wd_max: '0.0',
        sd_min: '0.0',
        sd_max: '0.0',
      },
      loading: false,
      rules: {
        wd_min: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { validator: validateNum_wd, trigger: 'blur' },
        ],
        wd_max: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { validator: validateNum_wd, trigger: 'blur' },
        ],
        sd_min: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { validator: validateNum_sd, trigger: 'blur' },
        ],
        sd_max: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { validator: validateNum_sd, trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.initList()
  },
  methods: {
    handleInput(value, id) {
      value = value.replace(/[^0-9.]/g, '') // 限制只输入数字和.
      if (value.indexOf('.') > 0) {
        value = value.slice(0, value.indexOf('.') + 2) // 限制小数点位数
      }
      // switch (id.split('_')[0]) {
      //   case 'wd':
      //     value = value.replace(/[^0-9]/g, '') // 限制只输入数字
      //     if (value.indexOf('.') > 0) {
      //       value = value.slice(0, value.indexOf('.') + 2) // 限制小数点位数
      //     }
      //     break
      //   case 'sd':
      //     value = value.replace(/[^0-9]/g, '') // 限制只输入数字
      //     break
      // }
      this.ruleForm[`${id}`] = value
    },
    blurInput(e, id) {
      const value = e.target.value
      const fistValue = Number(value.toString().split('.')[0])
      let lastValue = ''
      if (value.toString().split('.').length > 1) {
        lastValue = value.toString().split('.')[1]
        if (lastValue.length > 1) {
          lastValue = `.${value.toString().split('.')[1].slice(0, 1)}`
        }
        if (lastValue.length === 1) {
          lastValue = `.${value.toString().split('.')[1]}`
        }
        if (value.toString().split('.')[1] === '') {
          lastValue = '.0'
        }
      } else {
        lastValue = '.0'
      }
      this.ruleForm[`${id}`] = `${fistValue}${lastValue}`
    },
    // 查询
    async initList() {
      this.loading = true
      const { data: res } = await this.$http.post(`${pinT}dh/selectDongHuan`)
      this.loading = false
      switch (res.code) {
        case '0000':
          this.ruleForm = {
            id: res.data.DongHuan.id,
            wd_min: res.data.DongHuan.min_temperature,
            wd_max: res.data.DongHuan.max_temperature,
            sd_min: res.data.DongHuan.min_humidity,
            sd_max: res.data.DongHuan.max_humidity,
          }
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 修改
    async changeList() {
      const params = new URLSearchParams()
      params.append('ID', this.ruleForm.id)
      params.append('min_temperature', this.ruleForm.wd_min)
      params.append('max_temperature', this.ruleForm.wd_max)
      params.append('min_humidity', this.ruleForm.sd_min)
      params.append('max_humidity', this.ruleForm.sd_max)
      const { data: res } = await this.$http.post(`${pinT}dh/inserOrUpdatetDongHuan`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    submitBtn() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return
        }
        const list = JSON.parse(JSON.stringify(this.ruleForm))
        if (this.ruleForm.wd_min > this.ruleForm.wd_max) {
          console.log(this.ruleForm)
          this.ruleForm.wd_min = list.wd_max
          this.ruleForm.wd_max = list.wd_min
        }
        if (this.ruleForm.sd_min > this.ruleForm.sd_max) {
          this.ruleForm.sd_min = list.sd_max
          this.ruleForm.sd_max = list.sd_min
        }
        this.changeList()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.w150 {
  width: 150px;
}
.mb_8 {
  margin-bottom: 8px;
}
.inline {
  display: inline-block;
}
</style>
